
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>联系人月度统计</title>
    <style>
        #chart {
            width: 900px;
            height: 500px;
            margin: 50px auto;
        }
    </style>
</head>
<body>

<h2 style="text-align: center;">联系人月度新增数量趋势图</h2>
<div id="chart"></div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">
    /*<![CDATA[*/
    const months = [[${months}]];
    const counts = [[${counts}]];

    const chart = echarts.init(document.getElementById('chart'));

    const option = {
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: months
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: '新增联系人数量',
            type: 'line',
            data: counts,
            smooth: true,
            itemStyle: {
                color: '#5470C6'
            },
            areaStyle: {
                color: 'rgba(84,112,198,0.3)'
            },
            label: {
                show: true,
                position: 'top'
            }
        }]
    };

    chart.setOption(option);
    /*]]>*/
</script>

</body>
</html>
